<template>
  <router-link class="item" :to='item.path'>
    <i>{{item.iconText}}</i>
    <p>{{item.content}}</p>
  </router-link>
</template>
<script>
export default {
  name: 'iconitem',
  props: {
    item: Object
  }
}
</script>
<style lang="less" scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  i {
    text-align: center;
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 50%;
    background-color: #dfdfdf;
  }
}
.router-link-active {
  color: #eb7991;
  i {
    background-color: #eb7991;
    color: #fff;
  }
}
</style>
